<template>
<!-- 分类 -->
    <div class="categoryList">
        <div v-for="item in categoryList" :key="item.id">
            <p class="lili">{{item.name}}</p>
            <ul>
                <li v-for="items in item.goodsList" :key="items.id" @click="GoProductFn(items.id)">
                    <img v-lazy="items.list_pic_url" alt="">
                    <p>{{items.name}}</p>
                    <p class="categoryListprice">{{items.retail_price|filterPrice}}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props:["categoryList"],
    data () {
        return {
        }
    },
    methods:{
        //跳转到详情页 携带id
        GoProductFn(id){
            this.$router.push(`/product/${id}`)
        }
    },
}
</script>
 
<style lang = "less" scoped>
    .categoryList{
        background-color: #fff;
        text-align: center;
        font-family: "黑体";
    }
    .lili{
        padding-top: .2rem;
        line-height: .5rem;
        font-size: .2rem;
    }
    ul{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li{
        width: 49%;
        img{
            width: 100%;
        }
        .categoryListprice{
            line-height: .4rem;
            color: #8B0000;
        }
    }
    }
    
</style>